<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>formFilter</title>
    <style>
        .highlight {
            padding: 10px;
            border: 1px solid yellow;
            background-color: lightyellow;
        }
    </style>
</head>
<body>

<form>
    <p><input value="input without type"></p>
    <p><input type="text" value="input type text" autofocus></p>
    //autofocus 属性是逻辑属性,当设置该属性后，它规定在页面加载后下拉列表应该自动获得焦点。
    <p><input type="text" value="input type text disabled" disabled></p>
    <p><input type="password" value="input type password"></p>
    <p><input type="checkbox"> input type checkbox</p>
    <p><input type="checkbox" checked> input type checkbox checked</p>
    <p><input type="radio"> input type radio</p>
    <p><input type="radio" checked> input type radio checked</p>
    <p><input type="file"></p>
    <p><input type="image" src="../img/login.png"></p>
    <p><select></select></p>
    <p><select>
        <option value=""> -- 请选择 --</option>
        <option value="1">option 1</option>
        <option value="2" selected>option 2</option>
        <option value="3">option 3</option>
        <option value="4">option 4</option>
    </select></p>
    <p><textarea cols="30" rows="10"></textarea></p>
    <p><input type="submit" value="input type submit"></p>
    <p><input type="reset" value="input type reset"></p>
    <p><input type="button" value="input type button"></p>
    <p>
        <button>BUTTON</button>
    </p>
</form>

<script src="../vendor/jquery-1.12.4.js"></script>
<script>
    $(function () {
                console.log($(':checked').parent().addClass('highlight'))
        //                console.log($(':disabled').parent().addClass('highlight'))
        //                console.log($(':enabled').parent().addClass('highlight'))
        //                setTimeout(function () {
        //                    console.log($(':focus').parent().addClass('highlight'));
        //                }, 1000);
        //                        console.log($(':button').parent().addClass('highlight'))
        //                        console.log($(':checkbox').parent().addClass('highlight'))
        //                        console.log($(':file').parent().addClass('highlight'))
        //                        console.log($(':image').parent().addClass('highlight'))
        //                        console.log($(':input').parent().addClass('highlight'))
        //                        console.log($(':password').parent().addClass('highlight'))
        //                        console.log($(':radio').parent().addClass('highlight'))
        //                        console.log($(':reset').parent().addClass('highlight'))
        //                        console.log($(':selected').parent().addClass('highlight'))
//        console.log($(':submit').parent().addClass('highlight'))
                //console.log($(':text').parent().addClass('highlight'));
    });
</script>
</body>
</html>